<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019-07-03
  Time: 14:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>线边库</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <jsp:include page="${pageContext.request.contextPath }/resource_path.jsp" flush="true"/>
    <style type="text/css">
        .layui-table-click{
            background-color:#ddf2e9 !important;
        }
    </style>
</head>
<body>
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a>
              <cite>线边库</cite>
            </a>
        </span>
    </div>

    <%--弹框表格--%>
    <div id="tableDiv" hidden="hidden">
        <br>
        <form class="layui-form" id="storageForm">
            <input id="id" name="id" hidden="hidden">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" style="margin-left: 50px;">物料名称</label>
                    <div class="layui-input-inline" style="width:200px">
                        <input lay-verify="materielId" class="layui-input" type="text" id="materielId" name="materielId" style="width:200px">
                    </div>
                </div>
                <div class="layui-inline">
                    <font style="color:red; font-size: 24px;">*</font>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" style="margin-left: 50px;">物料数量</label>
                    <div class="layui-input-inline" style="width:200px">
                        <input lay-verify="materielQuantity" class="layui-input" type="text" id="materielQuantity" name="materielQuantity" style="width:200px">
                    </div>
                </div>
                <div class="layui-inline">
                    <font style="color:red; font-size: 24px;">*</font>
                </div>
            </div>
            <!-- <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" style="margin-left: 50px;">容器名称</label>
                    <div class="layui-input-inline" style="width:200px">
                        <input lay-verify="containerId" class="layui-input" type="text" id="containerId" name="containerId" style="width:200px">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" style="margin-left: 50px;">容器数量</label>
                    <div class="layui-input-inline" style="width:200px">
                        <input lay-verify="containerQuantity" class="layui-input" type="text" id="containerQuantity" name="containerQuantity" style="width:200px">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" style="margin-left: 50px;">容器返厂数量</label>
                    <div class="layui-input-inline" style="width:200px">
                        <input lay-verify="containerReturnQuantity" class="layui-input" type="text" id="containerReturnQuantity" name="containerReturnQuantity" style="width:200px">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" style="margin-left: 50px;">容器返厂数量</label>
                    <div class="layui-input-inline" style="width:200px">
                        <select name="nicai" lay-verify="required" lay-search="">
                            <option value="">直接选择或搜索选择</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="11">11</option>
                            <option value="111">111</option>
                            <option value="121">121</option>
                        </select>
                    </div>
                </div>
            </div> -->
            <button class="layui-btn layui-btn-blue" lay-submit lay-filter="formSubmit" style="margin-left:150px">提交</button>
            &emsp;&emsp;&emsp;&emsp;
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </form>
    </div>

    <!-- 顶部搜索框 -->
    <div class="x-body">
        <div style="margin-bottom: 18px">
            <div class="layui-inline">
                <table>
                    <tr>
                        <td>
                            <div class="layui-form" style="width: 180px; margin-left: 10px">
                                <input class="layui-input" name="keyword01" id="keyword01" placeholder="请输入主机厂" autocomplete="off" style="display: inline; width: 180px; margin-left: 10px">
                            </div>
                        </td>
                        <td>
                            <div class="layui-form" style="width: 180px; margin-left: 10px">
                                <input class="layui-input" name="keyword02" id="keyword02" placeholder="请输入物料名称" autocomplete="off" style="display: inline; width: 180px; margin-left: 10px">
                            </div>
                        </td>
                        <td>
                            <div class="layui-form" style="width: 180px; margin-left: 10px">
                                <input class="layui-input" name="keyword03" id="keyword03" placeholder="请输入SAP/QAD" autocomplete="off" style="display: inline; width: 180px; margin-left: 10px">
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
            <button class="layui-btn layui-btn-normal" data-type="reload" style="margin-left: 25px;"><i class="layui-icon layui-icon-search"></i>检索</button>
        </div>
        <!-- 头部按钮 -->
        <xblock>
        	<!-- <button class="layui-btn layui-btn-warm" id="addTable"><i class="layui-icon layui-icon-add-circle-fine"></i>新增</button> -->
            <a id="download" href="${pageContext.request.contextPath }/excel/excelTemplate.do?title=线边库模板" class="layui-btn layui-btn-blue"><i class="layui-icon layui-icon-file-b"></i>下载模板</a>
        	<button id="test1" class="layui-btn layui-btn-blue" style="margin-right: 10px;"><i class="layui-icon layui-icon-upload"></i>导入</button>
            <button id="deleteTable" class="layui-btn layui-btn-danger"><i class="layui-icon layui-icon-delete"></i>批量删除</button>
        </xblock>
        <!-- 列表 -->
        <table class="layui-hide" id="tableList" lay-filter="tableList"></table>
        <!-- 行编辑 -->
        <script type="text/html" id="rowToolbar">
            <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
        </script>
    </div>

    <script type="text/javascript">
        var table;
        layui.use(['table','layer','form','upload'], function() {
            table = layui.table;
            var layer = layui.layer;
            var form = layui.form;
            var upload = layui.upload;
            var $ = layui.jquery, active = {
                reload: function () {
                    var keyword01 = $("#keyword01").val();
                    var keyword02 = $("#keyword02").val();
                    var keyword03 = $("#keyword03").val();
                    table.reload('storageAreaTableId', {
                        method: 'get'
                        ,where: {"suppliserName": keyword01, "materielName": keyword02, "materielNumber": keyword03}
	                    ,page:{
							curr:1  //重新从第一页开始
						}
                    });
                }
            }
            $('.layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
            
          	//指定允许上传的文件类型
            upload.render({
                elem: '#test1'
                ,url: '${pageContext.request.contextPath }/storageAreaManager/upload.do'
                ,accept: 'file' //普通文件
                ,exts: 'xls|xlsx' //只允许上传Excel文件
                ,field:'file'
                ,method: 'POST'
                ,done: function(res){
                    console.log(res)
                    if (res >0) {
                        toastr.success('导入成功！');
                    }else {
                        toastr.error('导入失败！');
                    }
                    setTimeout(function(){  //使用  setTimeout（）方法设定定时1000毫秒
                    	window.location.reload();
                    },1000);
                }
                ,error: function(){//请求异常回调
                    toastr.error('网络异常，请稍后重试！');
                }
            });

            /* 列表 */
            table.render({
                elem: '#tableList'
                ,url:'${pageContext.request.contextPath }/storageAreaManager/list.do'
                ,title: '线边库列表'
                ,id :'storageAreaTableId'
                ,limits:[10,20,30]
                ,cols: [[
                    {type: 'checkbox', fixed: 'left', },
                    {field:'', title:'序号', type:'numbers', align:'center'},
                    {field: 'id',title: 'id',hide:true},
                    {field:'customer', title:'主机厂', align:'center'},
                    {field:'suppliserName', title:'供应商', align:'center'},
                    {field:'batch', title:'车型', align:'center'},
                    {field:'materielNumber', title:'SAP/QAD', align:'center'},
                    {field:'materielName', title:'物料名称', align:'center'},
                    {field:'materielQuantity', title:'线边数量', align:'center', edit: 'text'},
                    {field:'uppers', title:'上限', align:'center'},
                    {field:'lowers', title:'下限', align:'center'},
                   /*  {field:'storageQuantity', title:'库区数量', align:'center', edit: 'text'},
                    {field:'sumQuantity', title:'合计', align:'center'}, */
                   /*  {field:'containerName', title:'容器名称', align:'center'},
                    {field:'containerQuantity', title:'容器数量', align:'center', edit: 'text'},
                    {field:'containerReturnQuantity', title:'容器返厂数量', align:'center', edit: 'text'},
                    {field:'remark', title:'备注', align:'center', edit: 'text'},
                    {field:'userName', title:'导入人', align:'center'},
                    {field:'createDate', title:'导入时间', align:'center'}, */
                    /* {fixed:'right',unresize: true, title:'操作', toolbar: '#rowToolbar',width:100, align: 'center'} */
                ]]
                ,page: true
                ,done : function(){
                    $('th').css({
                        'background-color': '#009688', 'color': '#fff','font-weight':'bold',
                    })
                }
            });
            
            //行内编辑
        	table.on('edit(tableList)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data;
        		var sumQuantity =  parseInt(data.materielQuantity) + parseInt(data.storageQuantity);
                
              	 obj.update({
              		sumQuantity : sumQuantity,
                 });
              
                 //修改操作
                $.ajax({
   		    	type:'post',
   		    	url:'${pageContext.request.contextPath }/storageAreaManager/update.do',
   		    	data:{"id":data.id,"materielQuantity":data.materielQuantity, "storageQuantity":data.storageQuantity, 
   		    			"sumQuantity":sumQuantity, "containerQuantity":data.containerQuantity, "containerReturnQuantity":data.containerReturnQuantity, "remark":data.remark
   		    		},
   		    	success:function(data){
   		    		if(data > 0){
   		    			//toastr.success("修改成功！");
   		    		}else{
   		    			toastr.warning("修改失败！");
   		    		}
   		    	}
   		   	 }); 
           });

            //新增
            $('#addTable').click(function(){
                layer.open({
                    type: 1 		//Page层类型
                    ,area: ['30%', '60%'] //宽  高
                    ,title: '新增'
                    ,shade: 0.1 	//遮罩透明度
                    ,shadeClose: true //点击遮罩关闭
                    ,maxmin: true //允许全屏最小化
                    ,anim: 1 		//0-6的动画形式，-1不开启
                    ,content: $('#tableDiv')
                    ,success: function () {
                        document.getElementById("storageForm").reset();
                        $("#id").val("")
                    }
                    ,end: function () {
                        var formDiv = document.getElementById('storageForm');
                        formDiv.style.display = '';
                        //layer.close(index);
                    }
                });
            });

            //批量删除
            $('#deleteTable').click(function(obj){
                var rowData = table.checkStatus('storageAreaTableId');
                var data = rowData.data;
                
                var str = "";
                if(data.length==0){
                    toastr.warning("请至少选择一条记录！");
                }else{
                    for(var i=0;i<data.length;i++){
                        str += data[i].id;
                        if(i != data.length-1){
                            str += ",";
                        }
                    }
                    layer.confirm('确定删除吗？', function(index){
                        $.ajax({
                            type:'post',
                            url:'${pageContext.request.contextPath }/storageAreaManager/delete.do',
                            data:{"ids":str},
                            dataType : "json",
                            success:function(data){
                                if(data>0){
                                    toastr.success("删除成功！");
                                }else{
                                    toastr.error("删除失败！");
                                }
	                            setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
	                                //关闭模态框
	                                // 父页面刷新
	                                window.location.reload();
	                            },1000);
                            }
                        })
                        layer.close(index);
                    });
                }
            });

            //编辑
            table.on('tool(tableList)', function(obj){
                var data = obj.data;
                var checkStatus = table.checkStatus(obj.data.id);
                $('#id').val(obj.data.id);
                if(obj.event === 'edit'){
                    layer.open({
                        type: 1 		//Page层类型
                        ,area: ['50%', '50%'] //宽  高
                        ,title: '编辑'
                        ,shade: 0.1 	//遮罩透明度
                        ,maxmin: true //允许全屏最小化
                        ,anim: 1 		//0-6的动画形式，-1不开启
                        ,content: $('#tableDiv')
                        ,success: function () {
                            //回显表单数据
                            for(var i=0;i<Object.entries(data).length;i++) {
                                var id = '#' + Object.entries(data)[i][0];
                                var text = Object.entries(data)[i][1];
                                $(id).val(text);
                            }
                            form.render();
                        }
                        ,end: function () {
                            var formDiv = document.getElementById('storageForm');
                            formDiv.style.display = '';
                            layer.close(index);
                        }
                    });
                }
            });

            /**
             * 提交(新增/编辑)
             */
            form.on('submit(formSubmit)', function (data) {
                var title = "新增";
                var url = '${pageContext.request.contextPath}/storageAreaManager/insert.do';
                var id = $.trim($("#id").val());
                if(id != "" && id != null && id != 'undefined'){
                    url = '${pageContext.request.contextPath}/storageAreaManager/update.do';
                    title = "修改";
                }
                $.ajax({
                    url : url,
                    data: $("#storageForm").serialize(),
                    cache : false,
                    type : "post",
                }).done(
                    function(res) {
                        if (res > 0) {
                            toastr.success(title + '成功！');
                        }else{
                            toastr.error(title + '失败！');
                        }
                        setTimeout(function(){
                            location.reload();
                        },1000);
                    }
                ).fail(
                    function(res) {
                        toastr.error(title + '失败！');
                        setTimeout(function(){
                            location.reload();
                        },1000);
                    }
                )
                return false;
            });

            /**
             * 表单校验
             */
            form.verify({
                materielId: function(value){
                    var str = value.replace(/\s+/g,"");
                    if(str == ''){
                        return '物料名称不能为空';
                    }
                },
                materielQuantity: function(value){
                    var str = value.replace(/\s+/g,"");
                    if(str == ''){
                        return '物料数量不能为空';
                    }
                }
            });
        });
        /*提示框样式*/
        toastrStyle()
    </script>
</body>
</html>
